<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float浮动原理</title>
    <style>
        /*并集选择器*/
        #parent,.son01,.son02,.son03,.son04{
            margin:10px;
            padding:5px;
            border-width:3px;
        }
        #parent{
            border-style:solid;
            border-color:black;
        }

        .son01{
            border-style:dashed;
            border-color:red;
            float: left;

        }

        .son02{
            border-style:dashed;
            border-color:blue;
            float: left;
        }
        .son03{
            border-style:dashed;
            border-color:green;
            float: left;
        }
        .son04{
            border-style:dashed;
            border-color:gray;
            float: left;
        }
                /*   这是解决盒子塌陷的最好方法*/

             方法1     /*.clear:after{       !*  在父元素加一个class等于clear        *!
                       content: '';          !*在clear类后面添加内容为空*!
                       display: block;      !*把添加的内容转化为块元素*!
                        clear: both;   */      /*清除这个元素两边的浮动*/

             方法2    /*  还有一个方法就是设置大的div盒子高度，慢慢调*/


             方法3        /* .clear {overflow: hidden;border:1px #000 solid; } !* 设置父元素class*!*/








    </style>
</head>
<body>
<div id="parent" class="clear">
    <div class="son01">
        <img src="img/photo-1.jpg" alt="日用品" width="150" height="150" title="日用品">
    </div>
    <div class="son02">
        <img src="img/photo-2.jpg" alt="图书" width="90" height="90" title="图书">
    </div>
    <div class="son03">
        <img src="img/photo-3.jpg" alt="鞋子" width="155"
             height="75" title="鞋子">
    </div>
    <div class="son04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。</div>
</div>
</body>
</html>